<!doctype html>
<html class="no-js">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="format-detection" content="telephone=no">
    <title>账号注册</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />

    <meta name="msapplication-TileColor" content="#0e90d2">

    <link rel="stylesheet" href="../../css/amazeui.css">
    <link rel="stylesheet" href="../../css/weui.css">

    <style>

        html { font-size: 10px; }
        html,body { background-color: #f0eff4;background-color: #fff !important; }
        body { padding-bottom: 0;margin: 0; }
        * { padding: 0;margin: 0; }
        header {position: fixed;top: 0;left: 0;z-index: 999;width: 100%;height: 49px; background-color: #333; color: #fff;}
        header .back { position: absolute;top: 0;left: 0; display: inline-block;padding-left: 5px; font-size: 30px; }
        header p { margin: 0;line-height: 49px; font-size: 16px;text-align: center; }
        .register { padding: 8px 6px; font-size: 0;}
        .res-item {position: relative;  width: 100%; border-bottom: 1px solid #bbb;font-size: 14px;}
        .res-icon {position: absolute;left: 8px;top: 5px;z-index: 100; display: inline-block;font-size: 18px;color: #9c9c9c; }
        .res-item .input-item {display: inline-block;width: calc(100% - 25px - 5px);padding-left:5px;height: 40px;border: none; font-size: inherit;background: transparent;outline: none;display: inline-block}
        .yanzhengma {position: absolute;right: 10px;top: 5px; z-index: 100;  display: inline-block;padding: 0.5rem 0.8rem;font-size: 14px; border: none;background-color: #df0024;color: #fff;border-radius: 8px; }
        .yanzhengma:disabled { background-color: #ddd; }
        .res-btn { margin-top: 20px;padding: 0 5px; }
        .res-btn button {
            margin: 30px auto;
            display: block;
            outline: none;
            background: #1197ff;
            border-radius: 5px;
            height: 40px;
            margin-bottom: 0;   
            color:#fff;
            }
        .res-btn button:focus { color: #fff; }
        .docInlineRadio:checked::after{
            content: '';
            width: 17px;
            height: 17px;
            position: absolute;
            left: 0;
            top: 0;
            background-image: url(../../images/duoxuan_true.png);
            background-size: cover;
        }
        .docInlineRadio::after{
            content: '';
            width: 17px;
            height: 17px;
            position: absolute;
            left: 0;
            top: 0;
            background-image: url(../../images/duoxuan.png);
            background-size: cover;
        }
        .shuxian{
            height: 30px;
            width: 1px;
            background: #bbbbbb;
            position:absolute;
            top: 5px;
            right: 110px;
        }  
        .res-item>img{
            width: 20px;
            display: inline-block;
            vertical-align: middle;
        }

    </style>
</head>

<body>
    <div class="register">
        <div class="res-item">
            <img src="../../images/shoujihao.png" alt="">
            <input type="tel" placeholder="请输入手机号" class="input-item mobile">
        </div>
        <div class="res-item">
            <img src="../../images/dun.png" alt="">
            <input type="text" style="width: 67%;" placeholder="请输入验证码" class="input-item yanzheng">
            <button type="button" class="yanzhengma">发送验证码</button>
            <div class="shuxian"></div>
        </div>
        <div class="res-item">
            <img src="../../images/mima.png" alt="">
            <input type="passWord" placeholder="请输入密码" class="input-item mima">
        </div>
        <div class="res-item">
            <img src="../../images/mima.png" alt="">
            <input type="passWord" placeholder="请输入确认密码" class="input-item repeatmima">
        </div>
        <div style="padding:8.5px 0" class="res-item">
            <img src="../../images/bixuan.png" alt="">&nbsp;
						必选&nbsp;
            <label class="am-radio-inline">
                <input type="radio" class="docInlineRadio" name="docInlineRadio"> 个人
            </label>
            <label class="am-radio-inline">
                <input type="radio" class="docInlineRadio" checked name="docInlineRadio"> 经纪人
            </label>
        </div>
        <div class="res-item i">
            <img src="../../images/gongsi.png" alt="">
            <input type="text" placeholder="请填写所在公司" class="input-item Gongsi">
        </div>
        <div class="res-item">
            <img src="../../images/quyu.png" alt="">
            <input type="text" placeholder="请填写所在区域" class="input-item Quyu">
        </div>
        <div class="res-btn">
            <button type="button" id="res-btn" class="am-btn am-btn-block">注册</button>
        </div>
    </div>
     <div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">警告</div>
            <div class="am-modal-bd cont">
                ---
            </div>
            <div class="am-modal-footer">
                <span class="am-modal-btn">确定</span>
            </div>
        </div>
    </div>
    <script src="../../js/jquery-3.2.1.min.js"></script>
    <script src="../../js/amazeui.js"></script>
    <script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
    <script>
       var id = '';
        $(function () {
            id = getQueryString('id');

        });

        function getQueryString(name) {

            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        }

        // 当单选按钮改变时触发change事件
        $('.docInlineRadio').change(function () {
            // 判断第一个是否被选中 ：方法prop
            if ($('.docInlineRadio').eq(0).prop('checked') == true) {
                // 选中以后要干的事情
                $('.i').hide();
            } else {
                // 没选中以后要干的事情
                $('.i').show();
            }
        })
        var times = 120;

        function roof() {
            $('.shuxian').css('right','140px');
            if (times == 0) {
                $('.yanzhengma').text('发送验证码(' + times + 's)');
                $('.yanzhengma').prop('disabled', false);
                $('.yanzhengma').text('发送验证码');
                $('.shuxian').css('right','110px');
                times = 120;
                return
            }
            $('.yanzhengma').text('发送验证码(' + times + 's)');
            times--;

            setTimeout(roof, 1000);
        }
        $('.yanzhengma').on('click', function () {
            $(this).prop('disabled', true);
            roof();
        });
        $('#res-btn').on('click', function () {
            var mobile = $('.mobile').val();
            var yanzheng = $('.yanzheng').val();
            var mima = $('.mima').val();
            var repeatmima = $('.repeatmima').val();
            var Quyu = $('.Quyu').val();
            var Gongsi = $('.Gongsi').val();
            if (mobile.length != 11) {
                $('.mobile').focus();
                document.querySelector('.mobile').value = '';
                $(".cont").text('请填写正确手机号码')
                $('#my-alert').modal('open')
                $('.button').removeAttr('disabled')
                return
            }
            if (!yanzheng) {
                $('.yanzheng').focus();
                $(".cont").text('请填写验证码')
                $('#my-alert').modal('open')
                $('.button').removeAttr('disabled')
                return
            }
            if (!mima) {
                $('.mima').focus();
                $(".cont").text('请填写密码')
                $('#my-alert').modal('open')
                $('.button').removeAttr('disabled')
                return
            }
            if (mima.length < 6) {
                $('.mima').focus();
                document.querySelector('.mima').value = '';
                $(".cont").text('请填新写6位数以上密码')
                $('#my-alert').modal('open')
                $('.button').removeAttr('disabled')
                return
            }
            if (!repeatmima) {
                $('.repeatmima').focus();
                $(".cont").text('请填写重复密码')
                $('#my-alert').modal('open')
                $('.button').removeAttr('disabled')
                return
            }
            if (repeatmima !== mima) {
                $('.repeatmima').focus();
                document.querySelector('.repeatmima').value = '';
                $(".cont").text('两次密码不一致')
                $('#my-alert').modal('open')
                $('.button').removeAttr('disabled')
                return
            }
            // if ($('.docInlineRadio').eq(1).prop('checked') == true) {
            //     if (Gongsi == '') {
            //         $('.Gongsi').focus();
            //         document.querySelector('.Gongsi').placeholder = '请填写所在公司';
            //         return
            //     }
            // }
            if (Quyu == '') {
                $('.Quyu').focus();
                $(".cont").text('请填写所在区域')
                $('#my-alert').modal('open')
                $('.button').removeAttr('disabled')
                return
            }
            typeWX = '';

            if ($('.docInlineRadio').eq(0).prop('checked') == true) {
                typeWX = 0;
                $.ajax({
                    type: 'POST',
                    url: "http://haidaiapi.test.zhikewl.com/api/member/Register?Id="+getQueryString('id'),
                    async: false,
                    data: {
                        userId: id,
                        Phone: mobile,
                        Password: mima,
                        Code: yanzheng,
                        Type: typeWX,
                        Area: Quyu
                    },
                    success: function (data) {
                        $(this).prop('disabled', true);
                            textalert(data.message)
                        if (data.type == 1) {
                            setTimeout(function () {
                                window.location.href = './login.html'
                            },500)
                        }
                    },
                    error: function (err) {
                        console.log(JSON.stringify(err))
                        $(this).prop('disabled', true);
                    }
                })
            } else {
                typeWX = 1;
                $.ajax({
                    type: 'POST',
                    url: "http://haidaiapi.test.zhikewl.com/api/member/Register?Id="+getQueryString('id'),
                    async: false,
                    data: {
                        Phone: mobile,
                        Password: mima,
                        Code: yanzheng,
                        Type: typeWX,
                        CompanyName: Gongsi,
                        Area: Quyu,
                        userId: id
                    },
                    success: function (data) {
                        console.log(JSON.stringify(data))
                        $(this).prop('disabled', true);
                        textalert(data.message)
                        if (data.type == 1) {
                            setTimeout(function () {
                                window.location.href = './login.html'
                            },500)
                        }
                    },
                    error: function (err) {
                        console.log(JSON.stringify(err))
                        $(this).prop('disabled', true);
                    }
                })
            }
        })

        function textalert(text) {
            $('body,html').css('width', '100%').css('height', '100%');
            var dome =
                `<div style="text-align:center;position:absolute;top:50%;transform:translate(-50%,-50%);border-radius: 5px;background: rgba(0,0,0,0.5);padding: 0.2rem;left: 50%;z-index:9999999999999999999999999;" class="mask_boxcontent">
          <p style="color:#fff;">${text}</p>
        </div>`
            $('body').append(dome);
            setTimeout(function () {
                $('.mask_boxcontent').fadeOut(500);
                setTimeout(function () {
                    $('.mask_boxcontent').remove();
                }, 500)
            }, 2000)
        }
    </script>

</body>

</html>